<template>
  <div class="dashboard-container">
    <div class="app-container">
      <div v-if="showList">
        <el-card>
          <el-form
            ref="searchFormRef"
            :model="searchForm"
            label-position="right"
            label-width="120px"
          >
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item prop="customer_name" label="客户/订单/商品">
                  <el-input
                    v-model="searchForm.customer_name"
                    placeholder="请输入订单号/商品名称/客户名称"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="customer_flow_up_status" label="报价单状态">
                  <el-select
                    v-model="searchForm.customer_flow_up_status"
                    placeholder="请选择报价单状态"
                    style="width: 100%"
                  >
                    <el-option label="客户比价中" value="1" />
                    <el-option label="客户觉得物流贵" value="2" />
                    <el-option label="报价后客户未读未回" value="3" />
                    <el-option label="报价后客户已读不回" value="4" />
                    <el-option label="客户暂无设计图纸" value="5" />
                    <el-option label="客户未提供报价信息" value="6" />
                    <el-option label="自定义" value="7" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="customer_main_chat_ways" label="付款方式">
                  <el-select
                    v-model="searchForm.customer_main_chat_ways"
                    placeholder="请选择付款方式"
                    style="width: 100%"
                  >
                    <el-option label="客户比价中" value="1" />
                    <el-option label="客户觉得物流贵" value="2" />
                    <el-option label="报价后客户未读未回" value="3" />
                    <el-option label="报价后客户已读不回" value="4" />
                    <el-option label="客户暂无设计图纸" value="5" />
                    <el-option label="客户未提供报价信息" value="6" />
                    <el-option label="自定义" value="7" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item prop="customer_flow_up_status" label="订单来源">
                  <el-select
                    v-model="searchForm.customer_flow_up_status"
                    placeholder="请选择订单来源"
                    style="width: 100%"
                  >
                    <el-option label="客户比价中" value="1" />
                    <el-option label="客户觉得物流贵" value="2" />
                    <el-option label="报价后客户未读未回" value="3" />
                    <el-option label="报价后客户已读不回" value="4" />
                    <el-option label="客户暂无设计图纸" value="5" />
                    <el-option label="客户未提供报价信息" value="6" />
                    <el-option label="自定义" value="7" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="customer_main_chat_ways" label="产品类型">
                  <el-select
                    v-model="searchForm.customer_main_chat_ways"
                    placeholder="请选择产品类型"
                    style="width: 100%"
                  >
                    <el-option label="客户比价中" value="1" />
                    <el-option label="客户觉得物流贵" value="2" />
                    <el-option label="报价后客户未读未回" value="3" />
                    <el-option label="报价后客户已读不回" value="4" />
                    <el-option label="客户暂无设计图纸" value="5" />
                    <el-option label="客户未提供报价信息" value="6" />
                    <el-option label="自定义" value="7" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="16">
                <el-form-item prop="start_end_time" label="时间区间">
                  <el-date-picker
                    v-model="searchForm.start_end_time"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-row type="flex" justify="end">
                  <el-button
                    type="success"
                    icon="el-icon-search"
                    size="medium"
                    @click="handleSearch"
                  >查询</el-button>
                  <el-button
                    type="success"
                    icon="el-icon-search"
                    size="medium"
                    @click="handleReset"
                  >重置</el-button>
                </el-row>
              </el-col>
            </el-row>
            <!-- <el-row :gutter="20">
              <el-col :span="24">
                <el-row type="flex" justify="end">
                  <el-button type="success" icon="el-icon-search" size="medium"
                    >查询</el-button
                  >
                  <el-button type="success" icon="el-icon-search" size="medium"
                    >重置</el-button
                  >
                </el-row>
              </el-col>
            </el-row> -->
          </el-form>
        </el-card>
        <el-card style="margin-top: 20px">
          <!-- 新增 - 导出 - 删除按钮 -->
          <el-row :gutter="20" style="margin-bottom: 20px">
            <el-col :span="20">
              <el-button
                type="success"
                size="medium"
                @click="handleAdd"
              >创建报价单</el-button>
              <el-button size="medium" plain>导出</el-button>
              <el-button type="danger" size="medium" plain>删除</el-button>
            </el-col>
            <el-col :span="2" :offset="2">
              <!-- <el-button type="primary" size="medium">创建订单</el-button> -->
            </el-col>
          </el-row>

          <vxe-grid
            ref="formRef"
            border
            background
            resizable
            max-height="480"
            align="center"
            :columns="tableColumn"
            :data="tableData"
            :loading="loading"
            :row-config="{ height: 43, isCurrent: true, isHover: true }"
            show-overflow
            @checkbox-change="checkboxChangeEvent"
            @checkbox-all="checkboxChangeEvent"
          >
            <!-- 沟通方式 -->
            <template #grid_chat="{ row }">
              <span />
            </template>
            <!-- 行操作按钮 -->
            <template #grid_opration="{ row, column, $rowIndex, $columnIndex }">
              <el-button
                v-for="(item, i) in optColumnButtonList"
                :key="'opt_' + row.id + '_' + i"
                type="text"
                @click="
                  toolbarButtonCallBack(
                    row,
                    column,
                    $rowIndex,
                    $columnIndex,
                    item.clickFn
                  )
                "
              >
                {{ item.title }}
              </el-button>
            </template>
            <!-- 分页器 -->
            <template #pager>
              <vxe-pager
                :layouts="[
                  'Sizes',
                  'PrevJump',
                  'PrevPage',
                  'Number',
                  'NextJump',
                  'FullJump',
                  'Total',
                ]"
                :current-page.sync="tablePage.page_num"
                :page-size.sync="tablePage.page_amounts"
                :total="tablePage.total"
                @page-change="handlePageChange"
              />
            </template>
          </vxe-grid>
        </el-card>
      </div>

      <!-- 创建报价单 -->
      <AddPriceSheet v-if="showAdd" @goback="goback" />
    </div>
  </div>
</template>

<script>
import AddPriceSheet from './modules/AddPriceSheet.vue'
export default {
  components: {
    AddPriceSheet
  },
  data() {
    return {
      showList: true,
      showAdd: false,
      searchForm: {
        customer_name: '',
        customer_flow_up_status: '',
        customer_main_chat_ways: '',
        start_end_time: ''
      },
      customer: {
        customerName: '',
        customerTime: '',
        customerState: ''
      },
      customerLsit: {},

      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],

      multipleSelection: [],

      currentPage4: 4,

      loading: false,
      // table列
      tableColumn: [
        { type: 'checkbox', width: 50 },
        { type: 'seq', title: '序号', width: 60 },
        { field: 'customer_cid', title: '创建时间', width: 200 },
        { field: 'customer_country', title: '报价单号', width: 80 },
        { field: '', title: '客户名称', width: 200 },
        {
          field: '',
          title: '订单来源',
          width: 120,
          slots: { default: '' }
        },
        { field: '', title: '客户类型', width: 200 },
        { field: '', title: '付款方式', width: 200 },
        { field: '', title: '收款账户', width: 200 },
        { field: '', title: '商品类型', width: 200 },
        { field: '', title: '总数量', width: 200 },
        { field: '', title: '预估商品总量', width: 200 },
        { field: '', title: '产品报价总额', width: 200 },
        { field: '', title: '产品税额', width: 200 },
        { field: '', title: '其他费用', width: 200 },
        { field: '', title: '合计金额', width: 200 },
        { field: '', title: '报价单状态', width: 200 },
        { field: '', title: '业务员', width: 200 },
        { field: '', title: '更新人', width: 200 },
        { field: '', title: '更新时间', width: 200 },
        {
          field: '',
          title: '操作',
          width: 200,
          fixed: 'right',
          slots: { default: 'grid_opration' }
          // slots: {
          //   default: ({ row }) => {
          //       return [
          //         <div>
          //           <vxe-button size="mini" status="primary" >查看</vxe-button>
          //           <vxe-button size="mini" status="warning">编辑</vxe-button>
          //           <vxe-button size="mini" status="danger">删除</vxe-button>
          //         </div>
          //       ]
          //   }
          // }
        }
      ],
      tableData: [
        {
          customer_cid: 100107,
          customer_code: '581C6F94D73791A566A5CAB7D88887029347B0E2',
          customer_name: '432432',
          customer_id: '423432',
          customer_country: '432432',
          customer_email: '4234234',
          customer_origin: '4324',
          customer_contact_ways:
            '{"phone":"3423432","wechat":"4324","whatsApp":"324324","qq":"32432423","call":"4234324"}',
          customer_main_chat_ways: '1,2,3',
          customer_flow_up_status: '7',
          customer_flow_up_mark: '434',
          customer_last_flow_up_time: '2022-07-12 20:18:32',
          customer_mark_msg: '42343',
          customer_company_name: '4324',
          customer_company_site: '4234',
          customer_is_deleted: 0,
          customer_add_time: '2022-07-12 20:18:32'
        },
        {
          customer_cid: 100106,
          customer_code: '5CCB7DE2130D70CF3D36258A19A7420747A4931B',
          customer_name: '',
          customer_id: '',
          customer_country: '',
          customer_email: '',
          customer_origin: '',
          customer_contact_ways:
            '{"phone":"","wechat":"","whatsApp":"","qq":"","call":""}',
          customer_main_chat_ways: '',
          customer_flow_up_status: '6',
          customer_flow_up_mark: '',
          customer_last_flow_up_time: '2022-07-11 22:42:22',
          customer_mark_msg: '',
          customer_company_name: '',
          customer_company_site: '',
          customer_is_deleted: 0,
          customer_add_time: '2022-07-11 22:42:22'
        },
        {
          customer_cid: 100105,
          customer_code: '65B30D32F7787BA27B555EF8E921AD998AEF6103',
          customer_name: '11',
          customer_id: '333',
          customer_country: '22',
          customer_email: '',
          customer_origin: '',
          customer_contact_ways:
            '{"phone":"333","wechat":"33","whatsApp":"222","qq":"333","call":"33"}',
          customer_main_chat_ways: '',
          customer_flow_up_status: '2',
          customer_flow_up_mark: '3',
          customer_last_flow_up_time: '2022-07-11 22:13:11',
          customer_mark_msg: '4',
          customer_company_name: '33',
          customer_company_site: '4',
          customer_is_deleted: 0,
          customer_add_time: '2022-07-11 22:13:11'
        },
        {
          customer_cid: 100104,
          customer_code: '61789C752FFFFBB9E9D22526FD779EDD528B49CE',
          customer_name: '',
          customer_id: '',
          customer_country: '',
          customer_email: '',
          customer_origin: '',
          customer_contact_ways:
            '{"phone":"","wechat":"","whatsApp":"","qq":"","call":""}',
          customer_main_chat_ways: '',
          customer_flow_up_status: '',
          customer_flow_up_mark: '',
          customer_last_flow_up_time: '2022-07-11 22:09:30',
          customer_mark_msg: '',
          customer_company_name: '',
          customer_company_site: '',
          customer_is_deleted: 0,
          customer_add_time: '2022-07-11 22:09:30'
        },
        {
          customer_cid: 100103,
          customer_code: 'C73AB0D4845E1D081C158A80EF662C930203398F',
          customer_name: '',
          customer_id: '',
          customer_country: '',
          customer_email: '',
          customer_origin: '',
          customer_contact_ways:
            '{"phone":"","wechat":"","whatsApp":"","qq":"","call":""}',
          customer_main_chat_ways: '1,2,3,4,5,6,7',
          customer_flow_up_status: '',
          customer_flow_up_mark: '',
          customer_last_flow_up_time: '2022-07-11 21:52:48',
          customer_mark_msg: '',
          customer_company_name: '',
          customer_company_site: '',
          customer_is_deleted: 0,
          customer_add_time: '2022-07-11 21:52:48'
        },
        {
          customer_cid: 100102,
          customer_code: 'D1D0A363C6A22A70042530678196DA09A97B0995',
          customer_name: '',
          customer_id: '',
          customer_country: '',
          customer_email: '',
          customer_origin: '',
          customer_contact_ways:
            '{"phone":"","wechat":"","whatsApp":"","qq":"","call":""}',
          customer_main_chat_ways: '',
          customer_flow_up_status: '',
          customer_flow_up_mark: '',
          customer_last_flow_up_time: '2022-07-10 18:37:53',
          customer_mark_msg: '',
          customer_company_name: '',
          customer_company_site: '',
          customer_is_deleted: 0,
          customer_add_time: '2022-07-10 18:37:53'
        },
        {
          customer_cid: 100101,
          customer_code: 'CA543709BD41BA12A0D5EC87CECBB591B6D8C3E9',
          customer_name: '搜索',
          customer_id: '神神道道',
          customer_country: '22',
          customer_email: '递四方速递',
          customer_origin: '',
          customer_contact_ways:
            '{"phone":"222","wechat":"1","whatsApp":"dsd","qq":"22","call":"333"}',
          customer_main_chat_ways: '',
          customer_flow_up_status: '',
          customer_flow_up_mark: '',
          customer_last_flow_up_time: '2022-07-09 22:47:33',
          customer_mark_msg: '',
          customer_company_name: '',
          customer_company_site: '',
          customer_is_deleted: 0,
          customer_add_time: '2022-07-09 22:47:33'
        },
        {
          customer_cid: 100100,
          customer_code: '9A35DDD82936EBAE8E04039167F5E15C0A3CDBB8',
          customer_name: '',
          customer_id: '',
          customer_country: '',
          customer_email: '',
          customer_origin: '',
          customer_contact_ways:
            '{"phone":"","wechat":"","whatsApp":"","qq":"","call":""}',
          customer_main_chat_ways: '',
          customer_flow_up_status: '',
          customer_flow_up_mark: '',
          customer_last_flow_up_time: '2022-07-09 22:01:50',
          customer_mark_msg: '',
          customer_company_name: '',
          customer_company_site: '',
          customer_is_deleted: 0,
          customer_add_time: '2022-07-09 22:01:50'
        },
        {
          customer_cid: 100098,
          customer_code: '59EDD7831F21FF650BC8290D2592A87DC103AC75',
          customer_name: '牛马',
          customer_id: '4',
          customer_country: '44',
          customer_email: '55',
          customer_origin: '44',
          customer_contact_ways:
            '{"phone":"5","wechat":"5","whatsApp":"5","qq":"5","call":"5"}',
          customer_main_chat_ways: '2,3',
          customer_flow_up_status: '3',
          customer_flow_up_mark: '5',
          customer_last_flow_up_time: '2022-07-09 21:04:51',
          customer_mark_msg: '5',
          customer_company_name: '5',
          customer_company_site: '5',
          customer_is_deleted: 0,
          customer_add_time: '2022-07-09 21:04:51'
        },
        {
          customer_cid: 100096,
          customer_code: 'ACCB9547DA',
          customer_name: '',
          customer_id: '',
          customer_country: '',
          customer_email: '',
          customer_origin: '',
          customer_contact_ways:
            '{"phone":"99","wechat":"99","whatsApp":"99","qq":"99","call":"99"}',
          customer_main_chat_ways: '',
          customer_flow_up_status: '',
          customer_flow_up_mark: '',
          customer_last_flow_up_time: '2022-07-09 20:23:41',
          customer_mark_msg: '',
          customer_company_name: '',
          customer_company_site: '',
          customer_is_deleted: 0,
          customer_add_time: '2022-07-09 20:23:41'
        },
        {
          customer_cid: 100096,
          customer_code: 'ACCB9547DA',
          customer_name: '',
          customer_id: '',
          customer_country: '',
          customer_email: '',
          customer_origin: '',
          customer_contact_ways:
            '{"phone":"99","wechat":"99","whatsApp":"99","qq":"99","call":"99"}',
          customer_main_chat_ways: '',
          customer_flow_up_status: '',
          customer_flow_up_mark: '',
          customer_last_flow_up_time: '2022-07-09 20:23:41',
          customer_mark_msg: '',
          customer_company_name: '',
          customer_company_site: '',
          customer_is_deleted: 0,
          customer_add_time: '2022-07-09 20:23:41'
        },
        {
          customer_cid: 100096,
          customer_code: 'ACCB9547DA',
          customer_name: '',
          customer_id: '',
          customer_country: '',
          customer_email: '',
          customer_origin: '',
          customer_contact_ways:
            '{"phone":"99","wechat":"99","whatsApp":"99","qq":"99","call":"99"}',
          customer_main_chat_ways: '',
          customer_flow_up_status: '',
          customer_flow_up_mark: '',
          customer_last_flow_up_time: '2022-07-09 20:23:41',
          customer_mark_msg: '',
          customer_company_name: '',
          customer_company_site: '',
          customer_is_deleted: 0,
          customer_add_time: '2022-07-09 20:23:41'
        }
      ], // table数据
      // 分页器配置
      tablePage: {
        page_num: 1,
        page_amounts: 10,
        total: 0
      },
      // 列表的操作按钮
      optColumnButtonList: [
        { type: 'view', title: '查看', clickFn: this.handleView },
        { type: 'edit', title: '编辑', clickFn: this.handleEdit },
        { type: 'delete', title: '删除', clickFn: this.handleDelete }
      ],

      // 快捷时间选择
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },

  methods: {
    // 列表中的操作按钮触发的回调
    toolbarButtonCallBack(row, column, rowIndex, columnIndex, clickFn) {
      if (clickFn) {
        window.setTimeout(() => {
          clickFn(row, column, rowIndex, columnIndex)
        }, 50)
      }
    },
    // 查询
    handleSearch() {
      this.tablePage.page_num = 1
      this.getCustomerDataList()
    },

    // 重置
    handleReset() {
      this.$refs.searchFormRef.resetFields()
    },

    // 复选框
    checkboxChangeEvent() {
      const $grid = this.$refs.formRef
      this.isAllChecked = $grid.isAllCheckboxChecked()
      this.isIndeterminate = $grid.isAllCheckboxIndeterminate()
      this.selectRecords = $grid.getCheckboxRecords()
    },

    // 切换分页
    async handlePageChange(row) {
      this.tablePage.page_num = row.currentPage
      this.tablePage.page_amounts = row.pageSize
      this.getCustomerDataList(this.tablePage)
    },

    // 创建报价单
    handleAdd() {
      this.showAdd = true
      this.showList = false
    },

    // 返回
    goback() {
      this.showAdd = false
      this.showList = true
    },

    // 删除
    handleDelete(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await deleteCustomerAPI({ cid: row.customer_cid })
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getCustomerDataList()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-link {
  margin-right: 5px;
}

.el-pagination {
  margin-top: 20px;
}

::v-deep .el-button--success {
  background-color: #1fcaa4;
  border-color: #1fcaa4;
}
</style>
